<template>
  <div class="theme-develop-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🎨 主题开发工具</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleNewTheme">
              <el-icon><Plus /></el-icon>
              新建主题
            </el-button>
            <el-button type="success" @click="handleImportTheme">
              <el-icon><Upload /></el-icon>
              导入主题
            </el-button>
          </div>
        </div>
      </template>

      <!-- 我的主题列表 -->
      <el-table :data="myThemes" border stripe>
        <el-table-column prop="name" label="主题名称" width="200">
          <template #default="{ row }">
            <div class="theme-name-cell">
              <div class="theme-preview-small" :style="{ background: row.preview }"></div>
              <strong>{{ row.name }}</strong>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="version" label="版本" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160" />
        <el-table-column label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEditTheme(row)">编辑</el-button>
            <el-button link type="success" @click="handlePreviewTheme(row)">预览</el-button>
            <el-button link type="warning" @click="handleExportTheme(row)">导出</el-button>
            <el-button link type="info" @click="handlePublishTheme(row)">发布</el-button>
            <el-button link type="danger" @click="handleDeleteTheme(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 主题编辑器 -->
    <el-dialog v-model="editorDialogVisible" title="主题编辑器" width="90%" fullscreen>
      <el-container style="height: calc(100vh - 200px);">
        <!-- 左侧：配置面板 -->
        <el-aside width="350px" style="border-right: 1px solid #dcdfe6; padding: 20px; overflow-y: auto;">
          <h3>主题信息</h3>
          <el-form label-width="80px" size="small">
            <el-form-item label="主题名称">
              <el-input v-model="currentThemeData.name" />
            </el-form-item>
            <el-form-item label="版本号">
              <el-input v-model="currentThemeData.version" />
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="currentThemeData.author" />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="currentThemeData.description" type="textarea" :rows="3" />
            </el-form-item>
          </el-form>

          <el-divider />

          <h3>颜色变量</h3>
          <div class="color-variables">
            <div v-for="(color, key) in currentThemeData.variables" :key="key" class="color-var-item">
              <span>{{ key }}</span>
              <el-color-picker v-model="currentThemeData.variables[key]" size="small" />
            </div>
            <el-button size="small" @click="handleAddVariable">
              <el-icon><Plus /></el-icon>
              添加变量
            </el-button>
          </div>

          <el-divider />

          <h3>预设方案</h3>
          <el-radio-group v-model="currentThemeData.preset" @change="handlePresetChange">
            <el-radio label="light">浅色</el-radio>
            <el-radio label="dark">深色</el-radio>
            <el-radio label="custom">自定义</el-radio>
          </el-radio-group>
        </el-aside>

        <!-- 中间：代码编辑器 -->
        <el-main>
          <div class="theme-code-editor">
            <el-tabs v-model="activeCodeTab" type="card">
              <el-tab-pane label="CSS变量" name="css">
                <el-input
                  v-model="currentThemeData.cssCode"
                  type="textarea"
                  :rows="20"
                  placeholder=":root {&#10;  --primary-color: #409eff;&#10;  --success-color: #67c23a;&#10;}"
                />
              </el-tab-pane>
              <el-tab-pane label="JavaScript" name="js">
                <el-input
                  v-model="currentThemeData.jsCode"
                  type="textarea"
                  :rows="20"
                  placeholder="export default {&#10;  name: 'my-theme',&#10;  colors: {}&#10;}"
                />
              </el-tab-pane>
              <el-tab-pane label="配置JSON" name="json">
                <el-input
                  v-model="currentThemeData.jsonCode"
                  type="textarea"
                  :rows="20"
                  placeholder="{&#10;  &quot;name&quot;: &quot;my-theme&quot;,&#10;  &quot;version&quot;: &quot;1.0.0&quot;&#10;}"
                />
              </el-tab-pane>
            </el-tabs>
            <div class="code-toolbar">
              <el-button size="small" @click="handleFormatCode">
                <el-icon><EditPen /></el-icon>
                格式化
              </el-button>
              <el-button size="small" @click="handleValidate">
                <el-icon><CircleCheck /></el-icon>
                验证
              </el-button>
              <el-button size="small" type="primary" @click="handleApplyCode">
                <el-icon><RefreshRight /></el-icon>
                应用到预览
              </el-button>
            </div>
          </div>
        </el-main>

        <!-- 右侧：预览面板 -->
        <el-aside width="400px" style="border-left: 1px solid #dcdfe6; padding: 20px; overflow-y: auto;">
          <h3>预览效果</h3>
          <div class="theme-preview-panel" :style="getThemeStyle()">
            <el-card>
              <template #header>
                <span>UI组件预览</span>
              </template>
              <div class="components-preview">
                <h4>按钮</h4>
                <div class="button-group">
                  <el-button type="primary" size="small">主要</el-button>
                  <el-button type="success" size="small">成功</el-button>
                  <el-button type="warning" size="small">警告</el-button>
                  <el-button type="danger" size="small">危险</el-button>
                </div>

                <h4>标签</h4>
                <div class="tag-group">
                  <el-tag size="small">默认</el-tag>
                  <el-tag type="success" size="small">成功</el-tag>
                  <el-tag type="warning" size="small">警告</el-tag>
                </div>

                <h4>表单</h4>
                <el-input placeholder="输入框" size="small" />
                <el-select placeholder="选择框" size="small" style="width: 100%; margin-top: 10px;" />

                <h4>其他</h4>
                <el-progress :percentage="60" />
                <el-switch v-model="demoSwitch" style="margin-top: 10px;" />
              </div>
            </el-card>
          </div>
        </el-aside>
      </el-container>
      <template #footer>
        <el-button @click="editorDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSaveTheme">保存主题</el-button>
        <el-button type="success" @click="handleBuildTheme">构建发布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Upload, EditPen, CircleCheck, RefreshRight
} from '@element-plus/icons-vue'

const editorDialogVisible = ref(false)
const activeCodeTab = ref('css')
const demoSwitch = ref(true)

const myThemes = ref([
  { id: 1, name: '我的主题1', description: '自定义主题', version: '1.0.0', status: '开发中', updateTime: '2024-01-20 16:30', preview: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
  { id: 2, name: '企业蓝', description: '企业风格蓝色主题', version: '1.1.0', status: '已发布', updateTime: '2024-01-18 14:20', preview: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' }
])

const currentThemeData = reactive({
  name: '',
  version: '1.0.0',
  author: '',
  description: '',
  preset: 'light',
  variables: {
    '--primary-color': '#409eff',
    '--success-color': '#67c23a',
    '--warning-color': '#e6a23c',
    '--danger-color': '#f56c6c'
  },
  cssCode: '',
  jsCode: '',
  jsonCode: ''
})

const getStatusTag = (status) => {
  const map = { '开发中': 'warning', '测试中': 'info', '已发布': 'success' }
  return map[status] || 'info'
}

const handleNewTheme = () => {
  editorDialogVisible.value = true
}

const handleImportTheme = () => {
  ElMessage.info('导入主题功能')
}

const handleEditTheme = (row) => {
  editorDialogVisible.value = true
}

const handlePreviewTheme = (row) => {
  ElMessage.info(`预览主题: ${row.name}`)
}

const handleExportTheme = (row) => {
  ElMessage.success(`主题 "${row.name}" 导出成功`)
}

const handlePublishTheme = (row) => {
  ElMessage.success(`主题 "${row.name}" 发布成功`)
}

const handleDeleteTheme = (row) => {
  ElMessageBox.confirm(`确定要删除主题 "${row.name}" 吗？`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    ElMessage.success('主题删除成功')
  })
}

const handleAddVariable = () => {
  ElMessageBox.prompt('请输入变量名称', '添加变量', {
    confirmButtonText: '添加',
    cancelButtonText: '取消',
    inputPlaceholder: '例如：--my-color'
  }).then(({ value }) => {
    if (value) {
      currentThemeData.variables[value] = '#000000'
      ElMessage.success('变量添加成功')
    }
  })
}

const handlePresetChange = (preset) => {
  if (preset === 'dark') {
    currentThemeData.variables = {
      '--primary-color': '#409eff',
      '--bg-color': '#1e1e1e',
      '--text-color': '#ffffff'
    }
  } else if (preset === 'light') {
    currentThemeData.variables = {
      '--primary-color': '#409eff',
      '--bg-color': '#ffffff',
      '--text-color': '#303133'
    }
  }
}

const handleFormatCode = () => {
  ElMessage.success('代码已格式化')
}

const handleValidate = () => {
  ElMessage.success('代码验证通过')
}

const handleApplyCode = () => {
  ElMessage.success('代码已应用到预览')
}

const handleSaveTheme = () => {
  ElMessage.success('主题保存成功')
}

const handleBuildTheme = () => {
  ElMessage.success('主题构建并发布成功')
  editorDialogVisible.value = false
}

const getThemeStyle = () => {
  const style = {}
  Object.keys(currentThemeData.variables).forEach(key => {
    style[key] = currentThemeData.variables[key]
  })
  return style
}
</script>

<style scoped>
.theme-develop-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.theme-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-preview-small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-code-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.code-toolbar {
  padding: 10px;
  border-top: 1px solid #dcdfe6;
  display: flex;
  gap: 10px;
}

.color-variables {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-var-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.theme-preview-panel {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.components-preview h4 {
  margin: 20px 0 10px 0;
  color: #303133;
}

.button-group,
.tag-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>

